<script>
  import request from '@/utils/request'
  import { getShowImage } from '@/utils'
  import Empty from '@/components/empty.vue'
  import shareInfo from '@/utils/shareInfo'
  import { getSysParam } from '@/utils'
  import banner from '@/components/banner.vue'
  import websocket from '@/utils/websocket'
  import studyRoomFloat from '@/components/studyRoomFloat/index.vue'
  import customTabbar from '@/components/customTabbar/index.vue'

  export default {
    name: 'list',
    components: { Empty, banner, studyRoomFloat, customTabbar },
    methods: {
      getShowImage,
      //获取课程列表
      getCourseList() {
        this.loadMoreStatusText = 'loading'
        request({
          url: 'courseClass/getCourseClassPage',
          data: {
            ...this.pagination,
            ...this.searchForm,
            businessType: this.businessType,
          },
          errorHandle: true,
        })
          .then((data) => {
            if (data.total === 0) {
              this.noData = true
              return
            }
            this.courseList.push(...data.records)
            if (this.courseList.length >= data.total) {
              this.loadMoreStatusText = 'noMore'
            } else {
              this.loadMoreStatusText = 'more'
            }
          })
          .catch(() => {
            this.loadMoreStatusText = 'more'
          })
      },
      //获取课程详情
      async getCourseDetail() {
        const res = await request({
          url: 'courseClass/getDetailsById',
          data: {
            id: this.lastOpenCourseId,
          },
          showLoading: true,
          errorHandle: true,
        })
        for (let courseListElement of this.courseList) {
          if (courseListElement.id === this.lastOpenCourseId) {
            for (let courseListElementKey in courseListElement) {
              courseListElement[courseListElementKey] =
                res[courseListElementKey]
            }
            break
          }
        }
      },
      //重置分页并重新获取课程列表
      resetPaginationAndRefreshList() {
        this.pagination.current = 1
        this.courseList = []
        this.noData = false
        this.getCourseList()
      },
      //课程点击
      async courseItemClick(item) {
        this.lastOpenCourseId = item.id
        uni.navigateTo({ url: '/pages/course/detail?id=' + item.id })
      },
    },
    data() {
      return {
        examList: [],
        courseTypeList: [],
        pagination: {
          current: 1,
          size: 10,
        },
        searchForm: {
          typeCode: '', //课程分类
          examId: '', //考试id
        },
        noData: false,
        loadMoreStatusText: 'more',
        courseList: [],
        openPage: true, //是否开启课程板块
        firstTimeOpenPage: true, //是否是首次打开这个页面
        lastOpenCourseId: '', //上次打开查看详情的课程id
        businessType: '', // 业务类型 Racked 带背词库
      }
    },
    async onLoad(query) {
      this.businessType = query.businessType
      //检查是否开启了课程板块
      this.openPage = (await getSysParam('openCoursePage')) !== '否'
    },
    async onShow() {
      websocket.trackCurrentPage('课程列表').catch(() => {})
      //如果是从详情页返回回来，则对上次打开的课程进行刷新
      if (this.lastOpenCourseId) {
        await this.getCourseDetail()
        this.lastOpenCourseId = ''
        return
      }
      await Promise.all([
        //获取考试列表
        request({
          url: 'exam/getAllExam',
          showLoading: true,
          errorHandle: true,
        }).then(async (data) => {
          data.unshift({ examId: '', examName: '不限' })
          this.examList = data
        }),
        //获取课程班型类型列表
        request({
          url: 'courseClass/listCourseType',
          showLoading: true,
          errorHandle: true,
        }).then((data) => {
          data.unshift({ typeCode: '', typeName: '全部' })
          this.courseTypeList = data
        }),
      ])
      //获取课程列表
      this.resetPaginationAndRefreshList()
    },
    //页面到达底部的时候自动加载下一页
    onReachBottom() {
      if (
        this.noData ||
        this.loadMoreStatusText === 'noMore' ||
        this.loadMoreStatusText === 'loading'
      ) {
        return
      }
      this.pagination.current++
      this.getCourseList()
    },
    //配置右上角分享
    async onShareAppMessage() {
      return await shareInfo.getDefaultShareInfo()
    },
  }
</script>

<template>
  <view
    class="page"
    v-if="openPage"
  >
    <!--		轮播图-->
    <banner
      :position="3"
      height="320rpx"
    ></banner>
    <view class="classify">
      <!--		考试选择-->
      <view class="exam-selection item">
        <view
          class="exam-item"
          v-for="item in examList"
          :key="item.examId"
          :class="{ active: searchForm.examId === item.examId }"
          @click="
            () => {
              searchForm.examId = item.examId
              resetPaginationAndRefreshList()
            }
          "
        >
          <text>{{ item.examName }}</text>
          <view
            class="underline"
            v-if="searchForm.examId === item.examId"
          ></view>
        </view>
      </view>
      <!--			课程分类-->
      <view class="exam-classify item">
        <view
          class="exam-classify-item"
          :class="{ active: searchForm.typeCode === item.typeCode }"
          v-for="item in courseTypeList"
          :key="item.typeCode"
          @click="
            () => {
              searchForm.typeCode = item.typeCode
              resetPaginationAndRefreshList()
            }
          "
          >{{ item.typeName }}</view
        >
      </view>
    </view>
    <!--		课程列表-->
    <view
      class="course-list"
      v-if="!noData"
    >
      <view
        class="course-item"
        v-for="item in courseList"
        @click="courseItemClick(item)"
        :key="item.id"
      >
        <image
          class="banner"
          :src="getShowImage(item.topCarouselList[0])"
        ></image>
        <view class="content">
          <view class="name">
            <text class="text">{{ item.className }}</text>
            <!--						已购买且商品金额大于0时才展示-->
            <text
              class="text"
              style="color: var(--text-color-light)"
              v-if="item.isRegistered === 1 && item.price > 0"
              >\t(已购买)</text
            >
          </view>
          <view class="tag-list row">
            <view
              class="tag-item"
              v-for="tag in item.tagsList"
              :key="tag"
              >{{ tag }}</view
            >
            <!--						<view class="team-buying-tag tag-item">可拼团</view>-->
          </view>
          <view class="footer">
            <view class="view-detail-btn">
              <text>查看详情</text>
              <text>{{ ' >' }}</text>
            </view>
          </view>
        </view>
      </view>
      <view style="display: flex; width: 100%; justify-content: center">
        <uni-load-more :status="loadMoreStatusText"></uni-load-more>
      </view>
    </view>
    <empty
      v-else
      height="calc(100vh - 472rpx)"
    />

    <studyRoomFloat></studyRoomFloat>
    <customTabbar></customTabbar>
  </view>
</template>

<style scoped lang="scss">
  .page {
    min-height: 100vh;
    background: #fffaf5;
    padding-bottom: calc(122rpx + env(safe-area-inset-bottom));
    .classify {
      background: white;
      padding: 20rpx 0;
      .item {
        display: flex;
        flex-wrap: nowrap;
        width: 100vw;
        overflow-y: auto;
      }
      .exam-selection {
        padding-bottom: 30rpx;
        .exam-item {
          margin-left: 40rpx;
          font-size: 32rpx;
          position: relative;
          min-width: max-content;
          &.active {
            font-weight: bold;
          }
          .underline {
            position: absolute;
            bottom: -16rpx;
            left: 50%;
            transform: translateX(-50%);
            height: 8rpx;
            width: 40rpx;
            border-radius: 4rpx;
            background: var(--theme-color);
          }
        }
      }
      .exam-classify {
        .exam-classify-item {
          height: 60rpx;
          border-radius: 30rpx;
          margin-left: 16rpx;
          padding: 0 20rpx;
          line-height: 60rpx;
          font-size: 28rpx;
          background: var(--gray-background-color);
          min-width: max-content;
          &.active {
            background: var(--theme-color);
            color: var(--text-color-white);
          }
        }
      }
    }
    .course-list {
      padding: 24rpx;
      display: flex;
      flex-wrap: wrap;
      .course-item {
        border-radius: 20rpx;
        background: white;
        margin-bottom: 24rpx;
        width: calc(50% - 13rpx);
        overflow: hidden;
        height: max-content;
        &:nth-child(odd) {
          margin-right: 24rpx;
        }
        .banner {
          width: 100%;
          height: 220rpx;
        }
        .content {
          padding: {
            left: 18rpx;
            right: 18rpx;
            bottom: 18rpx;
          }
          .name {
            margin-top: 14rpx;
            font-size: 30rpx;
            font-weight: 500;
            .text {
              text-overflow: ellipsis;
              word-wrap: break-word;
              display: block;
            }
          }
          .tag-list {
            margin-top: 18rpx;
            display: flex;
            flex-wrap: wrap;
            .tag-item {
              margin-right: 16rpx;
              font-size: 26rpx;
              color: var(--text-color-theme);
              margin-bottom: 18rpx;
              &.team-buying-tag {
                color: #e83030;
              }
            }
          }
          .footer {
            .view-detail-btn {
              width: 100%;
              height: 48rpx;
              display: flex;
              align-items: center;
              justify-content: center;
              background: #fff4cc;
              font-size: 26rpx;
              color: #a77e00;
              border-radius: 8rpx 8rpx 8rpx 8rpx;
            }
          }
        }
      }
    }
  }
</style>
